<link rel="stylesheet" href="http://www.12301.cc/tpl/orderquery/libs/jquery-ui.min.css"/>
<link rel="stylesheet" href="http://www.12301.cc/tpl/orderquery/libs/jquery-ui.theme.min.css"/>
<script type="text/javascript">document.title="票付通-订单查询"</script>
<style type="text/css">
    .siteLeftBar{ width:155px;}
    .siteLeftBar .left_memb{ padding-left:15px;}
    .pageRightArea{ width:835px;}

    .pageRightArea{ position:relative;}
    .filterWrap{ background:#fff; border-bottom:1px solid #dbdbdb; margin-bottom:10px;}
    .filterWrap .ui-h1{ padding-left:15px;}
    .filterCon{ padding:15px;}
    .filterWrap .line{ width:100%; overflow:hidden; margin-bottom:10px;}
    .filterWrap .line:last-child{ margin-bottom:0}
    .filterWrap .mluSelectBox{ float:left;}
    .filterWrap .mluSelectBox .lt{ float:left; width:120px; height:34px; line-height:34px; background:#f5f5f5; border:1px solid #e5e5e5;}
    .filterWrap .mluSelectBox .lt .t{ padding-left:7px;}
    .filterWrap .mluSelectBox .lt .triBtn{ float:right; margin-right:3px; cursor:pointer}
    .filterWrap .mluSelectBox .lt .triBtn .iconfont{ font-size:22px; }
    .filterWrap .mluSelectBox .lt .triBtn .iconfont.up{ display:none }
    .filterWrap .mluSelectBox .lt .triBtn.on .iconfont.up{ display:inline-block}
    .filterWrap .mluSelectBox .lt .triBtn.on .iconfont.down{ display:none}
    .filterWrap .mluSelectBox .rt{  float:left; width:380px; height:34px; padding:0 6px; border:1px solid #e5e5e5; border-left:0 none; border-top-left-radius:0; border-bottom-left-radius:0}
    .filterWrap .mluSelectBox .rt.time{ padding:0}
    .filterWrap .mluSelectBox.keyword .rt{ width:auto; padding-right:0; padding-left:0; border:0 none}
    .filterWrap .timeNodeBox{ float:left; height:34px; line-height:34px;}
    .filterWrap .timeNodeBox .timenode{ margin-left:8px;}
    .filterWrap .timeNodeBox .clear{ color:#f07845;}
    .filterWrap .timeNodeBox .clear:hover{ color:#f07845; text-decoration:underline}
    .filterWrap .searchBtn{ display:block; float:left; width:85px; height:34px; line-height:34px; margin-top:1px; margin-left:8px; text-align:center; color:#fff; background:#f07845}
    .filterWrap .searchBtn:hover{ text-decoration:none; background:#e06e3d}
    .filterWrap .keywordInp{ width:375px; padding-left:10px; padding-top:6px; padding-bottom:6px; border-left:0 none; border-top-left-radius:0; border-bottom-left-radius:0}
    .filterWrap .keywordInp:focus{ border-color:#dbdbdb}
    .filterWrap .calcadBox{ position:relative; width:180px; height:100%; line-height:34px;}
    .filterWrap .calcadBox .t{ position:relative; top:1px; width:155px; padding-left:5px; line-height:30px; padding-right:22px; overflow:hidden; font-family:arial; font-size:14px; border:0 none}
    .filterWrap .calcadBox.left{ float:left;}
    .filterWrap .calcadBox.right{ float:right; margin-right:6px;}
    .filterWrap .calcadBox .triBtn{ position:absolute; top:-2px; right:0; cursor:pointer;}
    .filterWrap .calcadBox .triBtn .iconfont{ top:1px; font-size:22px; color:#0797d9}
    .filterWrap .zhi{ position:relative; top:4px; left:2px; font-size:26px; color:#a9a9a9}
    .filterWrap .line.radioGroup{ padding:3px 0 5px;}
    .filterWrap .line.radioGroup .lt{ padding-left:8px; margin-right:10px;}
    .filterWrap .radioGroup{ position:relative; top:1px; margin-right:15px;}
    .filterWrap .radioGroup label{ margin-left:2px; cursor:pointer}
    .filterWrap .radioGroup input{ position:relative; top:2px;}

    .selectPop{ display:none; position:absolute; left:15px; width:120px; background:#fff; border-top:0 none}
    .selectPop .select-item{ height:34px; line-height:34px; border-bottom:1px solid #dbdbdb; padding-left:5px; cursor:pointer}
    .selectPop .select-item:hover,.selectPop .select-item.active{ background:#fcfcfc}
    .selectPop.time{ top:117px;}
    .selectPop.name{ top:163px;}

    .sortBar{ position:relative; overflow:hidden; background:#fff; padding-left:10px; border-bottom:1px solid #dbdbdb;}
    .sortBar .sortItem{ float:left; height:34px; line-height:34px; padding:0 10px; border-right:1px solid #dbdbdb; cursor:pointer}
    .sortBar .sortItem.bookingtime{ padding-left:5px;}
    .sortBar .sortItem .iconfont.up{ display:none}
    .sortBar .sortItem.on .iconfont.up{ display:none}
    .sortBar .sortItem.on .iconfont.down{ display:inline-block}
    .sortBar .sortItem.on{ color:#f07845}
    .exportExeclBtn{ position:absolute; top:0; right:0; bottom:0; width:80px; line-height:34px; text-align:center; cursor:pointer}


    /*.myRight .col{ float:left; text-align:center; border-right:1px solid #dbdbdb}*/
    /*.myRight .col.alignLeft{ text-align:left; padding-left:10px;}*/
    /*.myRight .col.alignLeft.col_1{ text-align:left; padding-left:15px;}*/
    /*.myRight .col_1{ width:200px;}*/
    /*.myRight .col_2{ width:100px;}*/
    /*.myRight .col_3{ width:120px;}*/
    /*.myRight .col_4{ width:120px;}*/
    /*.myRight .col_5{ width:50px;}*/
    /*.myRight .col_6{ width:80px;}*/

    /*.listItem{ width:100%; overflow:hidden; position:relative; background:#fff; border-bottom:1px solid #dbdbdb}*/
    /*.listItem .ltop{ width:100%; height:34px; line-height:34px; overflow:hidden; border-bottom:1px solid #dbdbdb}*/
    /*.listItem .ltop .lt{ float:left; padding-left:15px;}*/
    /*.listItem .ltop .lt .od{ margin-left:10px}*/
    /*.listItem .ltop .lt .od .ordernum{ margin-left:2px}*/
    /*.listItem .ltop .rt{ float:right; padding-right:15px;}*/

    /*.tableHead{ overflow:hidden; background:#e5e5e5; border-bottom:1px solid #dbdbdb}*/
    /*.tableHead .col{ height:34px; line-height:34px; border-right:0 none}*/
    .table,.colUl{ table-layout:fixed}
    .table .col{ text-align:center}
    .table .col.alignLeft{ text-align:left; padding-left:15px;}
    .table .col_1{ width:200px;}
    .table .col_2{ width:150px;}
    .table .col_3{ width:150px;}
    .table .col_4{ width:170px;}
    .table .col_5{ width:80px;}
    .table .col_6{ width:80px;}
    .table thead .col{ font-size:12px; font-weight:normal;}
    .table .colUl{ margin-bottom:10px; background:#fff;}
    .table .listItem .col{ border-bottom:1px solid #dbdbdb; border-right:1px solid #dbdbdb; height:60px;}
    .table .listItem .col_6{ border-right:0;}
    .table thead .col{ height:34px; line-height:34px; background:#f0f0f0}
    .table .ltop{ height:34px; line-height:34px; overflow:hidden; border-bottom:1px solid #dbdbdb}
    .table .ltop .lt{ float:left; padding-left:15px;}
    .table .ltop .lt .od{ margin-left:10px}
    .table .ltop .lt .od .ordernum{ margin-left:2px}
    .table .ltop .rt{ float:right; padding-right:15px;}
    .table .listItem:hover .colUl{ background:#f6fcff}
</style>
<div id="myRight" class="myRight">
    <div id="filterWrap" class="filterWrap">
        <div class="ui-h1">订单查询</div>
        <div class="filterCon">
            <div class="line clearfix">
                <div class="mluSelectBox">
                    <div id="time_select_box" data-param="time_type" data-val="" class="lt">
                        <span class="t"></span>
                        <span class="triBtn"><i class="iconfont down">&#xe673;</i><i class="iconfont up">&#xe695;</i></span>
                    </div>
                    <div class="rt ui-radius ui-shadow time">
                        <div class="calcadBox left">
                            <input id="btimeInp" readonly class="t" type="text"/>
                            <span class="triBtn"><i class="iconfont">&#xe65b;</i></span>
                        </div>
                        <span class="zhi">-</span>
                        <div class="calcadBox right">
                            <input id="etimeInp" readonly class="t" type="text"/>
                            <span class="triBtn"><i class="iconfont">&#xe65b;</i></span>
                        </div>
                    </div>
                </div>
                <div id="timeNodeBox" class="timeNodeBox">
                    <a class="timenode clear ui-link clear" href="javascript:void(0)">清除</a>
                    <a class="timenode ui-link yestoday" href="javascript:void(0)">昨天</a>
                    <a class="timenode ui-link today" href="javascript:void(0)">今天</a>
                    <a class="timenode ui-link week" href="javascript:void(0)">本周</a>
                    <a class="timenode ui-link prevWeek" href="javascript:void(0)">上周</a>
                    <a class="timenode ui-link month" href="javascript:void(0)">本月</a>
                    <a class="timenode ui-link prevMonth" href="javascript:void(0)">上月</a>
                </div>
            </div>
            <div class="line clearfix">
                <div class="mluSelectBox keyword">
                    <div id="name_select_box" data-param="select_type" data-val="" class="lt ">
                        <span class="t"></span>
                        <span class="triBtn"><i class="iconfont down">&#xe673;</i><i class="iconfont up">&#xe695;</i></span>
                    </div>
                    <div class="rt"><input class="keywordInp ui-textInp ui-radius ui-shadow" type="text" name="select_text" data-param="select_text" id="keywordInp"/></div>
                </div>
                <a href="javascript:void(0)" id="searchBtn" class="searchBtn ui-radius">搜索</a>
            </div>
            <div id="filter_radioGroup_line" class="line clearfix radioGroup">
                <span class="lt">订单状态：</span>
                <span class="radioGroup"><input data-param="pmode" data-val="0" type="radio" name="pmode" id="pmode_0"/><label for="pmode_0">未支付</label></span>
                <span class="radioGroup"><input data-param="pmode" data-val="1" type="radio" name="pmode" id="pmode_1"/><label for="pmode_1">未验证</label></span>
                <span class="radioGroup"><input data-param="pmode" data-val="2" type="radio" name="pmode" id="pmode_2"/><label for="pmode_2">已验证</label></span>
                <span class="radioGroup"><input data-param="pmode" data-val="3" type="radio" name="pmode" id="pmode_3"/><label for="pmode_3">已过期</label></span>
                <span class="radioGroup"><input data-param="pmode" data-val="4" type="radio" name="pmode" id="pmode_4"/><label for="pmode_4">已取消</label></span>
            </div>
        </div>
    </div>
    <ul id="sortBar" class="sortBar clearfix">
        <li class="sortItem bookingtime on">
            <span class="t">下单时间</span>
            <i class="iconfont up">&#xe6b7</i>
            <i class="iconfont down">&#xe6b4</i>
        </li>
        <li class="sortItem checktime">
            <span class="t">验证时间</span>
            <i class="iconfont up">&#xe6b7</i>
            <i class="iconfont down">&#xe6b4</i>
        </li>
        <li id="exportExeclBtn" class="exportExeclBtn">导出数据</li>
    </ul>
<!--    <ul id="tableHead" class="tableHead clearfix">-->
<!--        <li class="col col_1 alignLeft">票信息</li>-->
<!--        <li class="col col_2 alignLeft">取票人</li>-->
<!--        <li class="col col_3 alignLeft">供应商/分销商</li>-->
<!--        <li class="col col_4 alignLeft">总金额(元)/支付方式</li>-->
<!--        <li class="col col_5">状态</li>-->
<!--        <li class="col col_6">操作</li>-->
<!--    </ul>-->
<!--    <div class="listUl">-->
<!--        <div class="listItem">-->
<!--            <div class="ltop clearfix">-->
<!--                <div class="lt">-->
<!--                    <a class="landTit" href="#">XXXXXX景区</a>-->
<!--                    <span class="od">订单号:<span class="ordernum">34515414</span></span>-->
<!--                </div>-->
<!--                <div class="rt">-->
<!--                    <span class="pretext">下单时间:</span>-->
<!--                    <span class="timenum">2015-11-19 08:06:20</span>-->
<!--                </div>-->
<!--            </div>-->
<!--            <ul class="itemCon">-->
<!--                <li class="col col_1">-->
<!--                    <div class="con"></div>-->
<!--                </li>-->
<!--                <li class="col col_2"></li>-->
<!--                <li class="col col_3"></li>-->
<!--                <li class="col col_4"></li>-->
<!--                <li class="col col_5"></li>-->
<!--                <li class="col col_6"></li>-->
<!--            </ul>-->
<!--        </div>-->
<!--    </div>-->
    <table id="table" class="table">
        <thead>
            <th class="col col_1 alignLeft">票信息</th>
            <th class="col col_2 alignLeft">取票人</th>
            <th class="col col_3 alignLeft">供应商/分销商</th>
            <th class="col col_4 alignLeft">总金额(元)/支付方式</th>
            <th class="col col_5">状态</th>
            <th class="col col_6">操作</th>
        </thead>
        <tbody>
            <tr class="listItem"><td colspan="6">
                <table class="colUl">
                    <thead><th class="col_1"></th><th class="col_2"></th><th class="col_3"></th><th class="col_4"></th><th class="col_5"></th><th class="col_6"></th></thead>
                    <tbody>
                        <tr>
                            <td class="ltop" colspan="6">
                                <div class="lt">
                                    <a class="landTit" href="#">XXXXXX景区</a>
                                    <span class="od">订单号:<span class="ordernum">34515414</span></span>
                                </div>
                                <div class="rt">
                                    <span class="pretext">下单时间:</span>
                                    <span class="timenum">2015-11-19 08:06:20</span>
                                </div>
                            </td>
                        </tr>
                        <tr class="listItemCon">
                            <td class="col col_1 alignLeft">
                                <div class="tdCon">票信息</div>
                            </td>
                            <td class="col col_2 alignLeft">
                                <div class="tdCon">取票人</div>
                            </td>
                            <td class="col col_3 alignLeft">
                                <div class="tdCon">供应商/分销商</div>
                            </td>
                            <td class="col col_4 alignLeft">
                                <div class="tdCon">总金额(元)/支付方式</div>
                            </td>
                            <td class="col col_5">
                                <div class="tdCon">状态</div>
                            </td>
                            <td class="col col_6">
                                <div class="tdCon">操作</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </td>
            </tr>
            <tr class="listItem"><td colspan="6">
                    <table class="colUl">
                        <thead><th class="col_1"></th><th class="col_2"></th><th class="col_3"></th><th class="col_4"></th><th class="col_5"></th><th class="col_6"></th></thead>
                        <tbody>
                        <tr>
                            <td class="ltop" colspan="6">
                                <div class="lt">
                                    <a class="landTit" href="#">XXXXXX景区</a>
                                    <span class="od">订单号:<span class="ordernum">34515414</span></span>
                                </div>
                                <div class="rt">
                                    <span class="pretext">下单时间:</span>
                                    <span class="timenum">2015-11-19 08:06:20</span>
                                </div>
                            </td>
                        </tr>
                        <tr class="listItemCon">
                            <td class="col col_1 alignLeft">
                                <div class="tdCon">1</div>
                            </td>
                            <td class="col col_2 alignLeft">
                                <div class="tdCon">2</div>
                            </td>
                            <td class="col col_3 alignLeft">
                                <div class="tdCon">3</div>
                            </td>
                            <td class="col col_4 alignLeft">
                                <div class="tdCon">4</div>
                            </td>
                            <td class="col col_5">
                                <div class="tdCon">5</div>
                            </td>
                            <td class="col col_6">
                                <div class="tdCon">6</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<ul id="timeSelectPop" class="timeSelectPop time selectPop ui-border">
    <li class="select-item" data-param="time_type" data-val="1">下单时间</li>
    <li class="select-item" data-param="time_type" data-val="3">验证时间</li>
</ul>
<ul id="nameSelectPop" class="nameSelectPop name selectPop ui-border">
    <li class="select-item" data-param="select_type" data-val="2">产品名称</li>
    <li class="select-item" data-param="select_type" data-val="1">订单号</li>
    <li class="select-item" data-param="select_type" data-val="5">远程订单号</li>
    <li class="select-item" data-param="select_type" data-val="4">取票人姓名</li>
    <li class="select-item" data-param="select_type" data-val="4">取票人手机</li>
    <li class="select-item" data-param="select_type" data-val="3">供应商/分销商</li>
</ul>
<!--<script type="text/javascript" src="http://www.helloweba.com/demo/timepicker/js/jquery-ui.js"></script>-->
<!--<script type="text/javascript" src="http://www.helloweba.com/demo/timepicker/js/jquery-ui-slide.min.js"></script>-->
<script type="text/javascript" src="http://www.12301.cc/tpl/orderquery/libs/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.helloweba.com/demo/timepicker/js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="http://www.12301.cc/js/plugin/date/moment.min.js"></script>
<script type="text/javascript" src="http://www.12301.cc/tpl/orderquery/js/build/v1/orderquery.all.v.0.1.js"></script>
<script type="text/javascript">
    $("#btimeInp").datetimepicker();
</script>